import React ,{useEffect,useState}from 'react';
import {Row, Col , Menu , Icon,} from 'antd';
import Router from 'next/router';
import Link from 'next/link';
import  axios from 'axios';
import servicePatn from '../config/api';
import '../public/style/components/header.css';


const Header = () => {
    const [navArr, setNavArr] = useState([])
    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(servicePatn.getTypeInfo)
                .then((res) => {
                    
                    return res.data.data
                })
            setNavArr(result)
        }
        fetchData()
    }, [])
    const hahdleClick = (e)=>{
        console.log(e)
        if(e.key==0){
            Router.push('/index')
        }else{
            Router.push('/list?id='+e.key)
        }
    }
    return (
        <div className='header'>
            <Row type='flex' justify='center'>
                <Col xs={24} sm={24} md={10} lg={15} xl={12}>
                    <span className='header-logo'>宋工</span>
                    &nbsp;&nbsp;
              <span className='header-text'>兴趣是最好的老师</span>
                </Col>
                <Col className='menu-div' xs={0} sm={0} md={14} lg={8} xl={6}>
                    <Menu mode='horizontal' onClick={hahdleClick}>
                        <Menu.Item key="0" >
                            <Icon type='home' />
                            首页
                            </Menu.Item>
                           {
                            navArr.map((item) => {
                                return (
                                    <Menu.Item key={item.id}>
                                        <Icon type={item.icon} />
                                        {item.typeName}
                                    </Menu.Item>
                                )
                            })
                        }


                    </Menu>
                </Col>
            </Row>
        </div>
    )
}

export default Header